<style src="./index.scss" lang="scss" scoped rel="stylesheet/scss"></style>
<template src="./index.html"></template>
<script>
export default {
    mixins: [Vue.prototype.$vFN.Mixins.Base, Vue.prototype.$vFN.Mixins.Edit],
    components: {},
    props: {
        // 使用者window实例 必定义
        appWindow: {
            type: Object,
            default: null,
        },
        // 一级栏目id
        categoryId: {
            type: String,
            default: "",
        },
        // 二级栏目id
        subCategoryId: {
            type: String,
            default: "",
        },
        // 配送模板列表
        templateOptions: {
            type: Array,
            default: [],
        },
        // 已选配送模板id
        freightTemplateId: {
            type: String,
            default: "",
        },
    },
    computed: {
        // 计价方式
        calculateType() {
            let _calculateType = "";
            if (this.freightTemplateId != "") {
                this.templateOptions.forEach((item) => {
                    if (item.id == this.freightTemplateId) {
                        _calculateType = item.calculateType;
                    }
                });
            }
            return _calculateType;
        },
    },

    data() {
        return {
            // 初始化状态
            initLoad: true,
            // 单元格合并时使用，每列合并的行数
            mergeQty: [],
            // 子集数量计数
            countQty: [],
            specsHeadData: [],
            specsTableData: [],
            // 编辑类型
            editType: "",
            // 商品类型
            dict_goods_type: [],
            form: {
                // 商品规格：1统一2多规格
                specsType: 1,
            },
            // 统一规格数据
            skuObj: {
                id: "",
                // 商品编码
                productCode: "",
                // 封面图
                albumUrl: "",
                // 销售价
                salePrice: "",
                // 市场价
                costPrice: "",
                // 成本价
                originalPrice: "",
                // 当前库存   (编辑时只读)
                stock: 0,
                // 添加/减少  (编辑时候出现)
                changeStockNum: 0,
                // 体积（m³）
                volume: "",
                // 重量（Kg）
                weight: "",
            },
            // 多规格已选规格数据
            skuValue: [],
            // 多规格数据
            skuList: [],
            // key 列表
            keyList: [],
            // 多规格历史数据
            skuListHistory: [],

            specsSubParentItem: null,
        };
    },
    methods: {
        SelectResourcesImage(index_) {
            console.error(index_);
            this.$vFN.Directives.SelectResourcesImage({
                appWindow: this.appWindow,
                count: 1,
                onSuccess: (res) => {
                    this.specsTableData[index_].albumUrl = res.data[0];
                },
            });
        },
        // 判断是否数字 不可为空 不可小于0 不可有小数
        validateNum(rule, value, callback) {
            if (value !== "") {
                if (/^[0-9]\d*$/.test(value) == false) {
                    callback(new Error("请输入正确商品编码, 限正整数"));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        },
        // 表单验证
        // 体积
        volume_validator(rule, value, callback) {
            // 如果配送类型为体积时 必填
            if (this.calculateType == 3) {
                if (value == "") {
                    callback(new Error("请填写体积"));
                } else {
                    this.$vFN.Tools.validateVolume(rule, value, callback);
                }
            } else {
                this.$vFN.Tools.validateVolume(rule, value, callback);
            }
        },
        // 如果配送类型为 重量 时 必填
        weight_validator(rule, value, callback) {
            if (this.calculateType == 2) {
                if (value == "") {
                    callback(new Error("请填写重量"));
                } else {
                    this.$vFN.Tools.validateVolume(rule, value, callback);
                }
            } else {
                this.$vFN.Tools.validateVolume(rule, value, callback);
            }
        },

        // 总验证
        async validate() {
            // 如果没选栏目直接返回false
            if (this.categoryId == "" && this.subCategoryId == "") {
                return false;
            }
            // 验证商品规格类型
            let _is1 = await this.validate1("editForm1");
            if (!_is1) {
                return false;
            }
            // 验证 统一规格时
            if (this.form.specsType == 1) {
                let _is2 = await this.validate1("editForm2");
                if (!_is2) {
                    return false;
                } else {
                    return true;
                }
            }
            // 验证 多规格时
            if (this.form.specsType == 2) {
                if (this.specsTableData.length <= 0) {
                    // this.showSpecsBaseBox();
                    this.$vFN.Tools.messageError("请添加规格！");
                    return false;
                } else {
                    let _is3 = await this.validate1("editForm3");
                    if (!_is3) {
                        return false;
                    } else {
                        return true;
                    }
                }
            }
        },
        // 验证 商品规格是否已选
        validate1(name) {
            let that = this;
            return new Promise((resolve, reject) => {
                that.$refs[name].validate((valid) => {
                    valid ? resolve(true) : resolve(false);
                });
            });
        },
        getData() {
            let _d = {
                // 商品规格：1统一2多规格
                specsType: this.form.specsType,
                specsValueIdLst: [],
                skuStockLst: [],
            };
            if (this.form.specsType == 1) {
                _d.skuStockLst = [this.skuObj];
            } else if (this.form.specsType == 2) {
                let _sv = [];
                let _arrKey = [];
                this.skuValue.forEach((item) => {
                    _arrKey.push(item.specsId);
                    if (item.specsValueLst.length > 0) {
                        item.specsValueLst.forEach((iitem) => {
                            _sv.push({
                                specsId: item.specsId,
                                specsValueId: iitem.specsValueId,
                            });
                        });
                    }
                });
                _d.specsValueIdLst = _sv;

                let _sl = [];
                this.specsTableData.forEach((item) => {
                    let _spData = {};
                    let _textArr = [];
                    let _idArr = [];
                    _arrKey.forEach((i) => {
                        let _keyName = "key" + i;
                        let _idName = "id" + i;
                        let _text = item[_keyName];
                        let _id = item[_idName];

                        _spData[_keyName] = _text;
                        _spData[_idName] = _id;
                        _textArr.push(_text);
                        _idArr.push(_id);
                    });
                    _spData.textArray = [..._textArr];
                    _spData.keyIds = [..._arrKey];
                    _spData.idArray = [..._idArr];
                    _spData.textString = [..._textArr].join(";");

                    /**
                     * spData 规格数据格式说明
                     * 例子：{"key5":"白色","id5":"7","key7":"32G","id7":"9","textArray":["白色","32G"],"keyIds":["5","7"],"idArray":["7","9"],"textString":"白色;32G"}
                     * @property {Number} key* id为*的规格的规格值的名称，根据规格数量会有多个
                     * @property {Array} id* id为*的规格的规格值的id，根据规格数量会有多个
                     * 
                     * @property {Array} idArray 当前规格值所属的规格的id集合
                     * @property {Array} keyIds 当前规格值的id集合
                     * @property {Array} textArray 规格值组合的名称 数组形式
                     * @property {String} textString 规格值组合的名称，字符串形式，主要用于回显，`;`号间隔
                     */
                    _sl.push({
                        id: item.id,
                        // 商品编码
                        productCode: item.productCode,
                        // 封面图
                        albumUrl: item.albumUrl,
                        // 销售价
                        salePrice: item.salePrice,
                        // 市场价
                        costPrice: item.costPrice,
                        // 成本价
                        originalPrice: item.originalPrice,
                        // 当前库存   (编辑时只读)
                        stock: item.stock,
                        // 添加/减少  (编辑时候出现)
                        changeStockNum: item.changeStockNum,
                        // 体积（m³）
                        volume: item.volume,
                        // 重量（Kg）
                        weight: item.weight,
                        // 前端自定义内容 后端报错后会原样返回
                        spData: JSON.stringify(_spData),
                    });
                });
                _d.skuStockLst = _sl;
            }
            return _d;
        },
        async install(params_) {
            this.editType = params_.type;

            if (params_.datasource) {
                this.form.specsType = params_.datasource.specsType;
                // 统一
                if (this.form.specsType == 1) {
                    for (let i in this.skuObj) {
                        let _v = params_.datasource.skuStockLst[0][i];
                        if (_v == null) {
                            _v = "";
                        }
                        this.skuObj[i] = _v;
                    }
                    this.skuObj.changeStockNum = 0;
                }
                // 多规格
                else if (this.form.specsType == 2) {
                    this.skuListHistory = params_.datasource.skuStockLst;
                    this.skuValue = params_.datasource.specsLst;

                    this.countData();
                }
            }
        },
        async uninstall() {
            this.skuValue = [];
            this.skuList = [];
            this.keyList = [];
            this.skuListHistory = [];
            this.mergeQty = [];
            this.countQty = [];
            this.specsHeadData = [];
            this.specsTableData = [];
            this.editType = "";
            this.skuObj = {
                id: "",
                // 商品编码
                productCode: "",
                // 封面图
                albumUrl: "",
                // 销售价
                salePrice: "",
                // 市场价
                costPrice: "",
                // 成本价
                originalPrice: "",
                // 当前库存   (编辑时只读)
                stock: 0,
                // 添加/减少  (编辑时候出现)
                changeStockNum: 0,
                // 体积（m³）
                volume: "",
                // 重量（Kg）
                weight: "",
            };
            this.form = {
                // 商品规格：1统一2多规格
                specsType: 1,
            };

            if (this.$refs["editForm1"]) {
                this.$refs["editForm1"].resetFields();
            }
            if (this.$refs["editForm2"]) {
                this.$refs["editForm2"].resetFields();
            }
            if (this.$refs["editForm3"]) {
                this.$refs["editForm3"].resetFields();
            }
        },

        // ————
        // 获取规格
        async getSpecsData() {
            let _data = await this.$vFN.Http.post(
                {
                    url: "mall-site-portal/product/listSpecs",
                    data: {
                        categoryId: this.subCategoryId,
                    },
                },
                this.appWindow
            );
            if (_data._ok) {
                // 不存在
                let _d1 = [];
                // 已存在
                let _d2 = [];
                // 过滤数据源
                let _dd = this.$vFN.Tools.givenTreeFilter({
                    data: _data.data,
                    parentKeys: {
                        label: "name",
                        value: "id",
                    },
                    subsetKeys: {
                        label: "specsValue",
                        value: "id",
                    },
                    subsetName: "specsValueLst",
                });

                _dd.forEach((item) => {
                    let _is = 0;
                    this.skuValue.forEach((iitem) => {
                        if (item.value == iitem.specsId) {
                            _is += 1;
                        }
                    });
                    if (_is <= 0) {
                        _d1.push(item);
                    } else {
                        _d2.push(item);
                    }
                });
                return {
                    d1: _d1,
                    d2: _d2,
                };
            }
        },

        // 选择规格
        async showSpecsBaseBox() {
            let _dd = await this.getSpecsData();
            console.error();
            this.$vFN.Directives.SelectGoodsSpecs({
                appWindow: this.appWindow,
                textTitle: "规格",
                list: _dd.d1,
                listBe: _dd.d2,
                onSuccess: (r) => {
                    this.selectSpecsBaseBox(r);
                },
                onCreate: async (r) => {
                    console.error(r);
                    let _data = await this.$vFN.Http.post(
                        {
                            url: "mall-site-portal/product/createSpecs",
                            data: {
                                name: r.value,
                                categoryId: this.subCategoryId,
                            },
                        },
                        this.appWindow
                    );
                    if (_data._ok) {
                        this.selectSpecsBaseBox({
                            value: _data.data.id,
                            label: _data.data.name,
                        });
                    }
                },
                onDelete: async (r, t) => {
                    let _data = await this.$vFN.Http.post(
                        {
                            url: "mall-site-portal/product/delSpecs",
                            data: {
                                ids: [r.item.value],
                            },
                        },
                        this.appWindow
                    );
                    if (_data._ok) {
                        this.$vFN.Tools.messageSuccess("删除成功");
                        let _dd3 = await this.getSpecsData();
                        t.updateData({
                            list: _dd3.d1,
                            listBe: _dd3.d2,
                        });
                    }
                },
            });
        },

        // 设置规格
        selectSpecsBaseBox(item_) {
            this.skuValue.push({
                specsId: item_.value,
                specsName: item_.label,
                specsValueLst: [],
            });
            // 计算数据
            this.countData();
        },

        // 移除规格
        removeSpecBase(item_, index_) {
            if (item_.specsValueLst.length > 0) {
                this.$vFN.Tools.messageError(
                    "请先移除【" + item_.specsName + "】下方的规格值！"
                );
                return;
            }
            this.$delete(this.skuValue, index_);
            // 计算数据
            this.countData();
        },

        // ————
        // 获取规格值
        async getSpecsSubData() {
            let _data = await this.$vFN.Http.post(
                {
                    url: "mall-site-portal/product/listSpecs",
                    data: {
                        categoryId: this.subCategoryId,
                    },
                },
                this.appWindow
            );
            if (_data._ok) {
                // 不存在
                let _d1 = [];
                // 已存在
                let _d2 = [];
                // 过滤数据源
                let _dd = this.$vFN.Tools.givenTreeFilter({
                    data: _data.data,
                    parentKeys: {
                        label: "name",
                        value: "id",
                    },
                    subsetKeys: {
                        label: "specsValue",
                        value: "id",
                    },
                    subsetName: "specsValueLst",
                });
                _dd.forEach((item) => {
                    if (this.specsSubParentItem.specsId == item.value) {
                        item.children.forEach((iiitem) => {
                            let _is = 0;
                            this.specsSubParentItem.specsValueLst.forEach(
                                (iitem) => {
                                    if (iiitem.value == iitem.specsValueId) {
                                        _is += 1;
                                    }
                                }
                            );
                            if (_is <= 0) {
                                _d1.push(iiitem);
                            } else {
                                _d2.push(iiitem);
                            }
                        });
                    }
                });

                return {
                    d1: _d1,
                    d2: _d2,
                };
            }
        },

        // 选择规格值
        async showSpecsSubBox(item_) {
            this.specsSubParentItem = item_;
            let _dd = await this.getSpecsSubData();

            this.$vFN.Directives.SelectGoodsSpecs({
                appWindow: this.appWindow,
                textTitle: "规格值",
                list: _dd.d1,
                listBe: _dd.d2,
                onCancel: (r) => {
                    this.specsSubParentItem = null;
                },
                onSuccess: (r) => {
                    this.selectSpecsSubBaseBox(r);
                },
                onCreate: async (r) => {
                    let _data = await this.$vFN.Http.post(
                        {
                            url: "mall-site-portal/product/createSpecsValue",
                            data: {
                                specsValue: r.value,
                                specsId: this.specsSubParentItem.specsId,
                            },
                        },
                        this.appWindow
                    );
                    if (_data._ok) {
                        this.selectSpecsSubBaseBox({
                            value: _data.data.id,
                            label: _data.data.specsValue,
                        });
                    }
                },
                onDelete: async (r, t) => {
                    let _data = await this.$vFN.Http.post(
                        {
                            url: "mall-site-portal/product/delSpecsValue",
                            data: {
                                ids: [r.item.value],
                            },
                        },
                        this.appWindow
                    );
                    if (_data._ok) {
                        this.$vFN.Tools.messageSuccess("删除成功");
                        let _dd3 = await this.getSpecsSubData();
                        t.updateData({
                            list: _dd3.d1,
                            listBe: _dd3.d2,
                        });
                    }
                },
            });
        },

        // 设置规格值
        selectSpecsSubBaseBox(item_) {
            this.skuValue.forEach((item, index) => {
                if (this.specsSubParentItem.specsId == item.specsId) {
                    this.skuValue[index].specsValueLst.push({
                        specsValueId: item_.value,
                        specsValue: item_.label,
                    });
                }
            });
            // 计算数据
            this.countData();
        },

        // 移除规格值
        removeSpecSub(item_, index_, iitem_, iindex_) {
            this.$delete(this.skuValue[index_].specsValueLst, iindex_);
            this.countData();
        },

        // 规格表格合并单元格
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (this.mergeQty[columnIndex] > 0) {
                if (rowIndex % this.mergeQty[columnIndex] === 0) {
                    return {
                        rowspan: this.mergeQty[columnIndex],
                        colspan: 1,
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0,
                    };
                }
            }
        },

        // 子集计数
        beCountQty() {
            // 已选规格
            let _tree = this.skuValue;
            // 已选规格的规格值数量
            let _countQty = [];
            // 解析已选规格
            _tree.forEach((item, index) => {
                _countQty.push(item.specsValueLst.length);
            });
            this.countQty = _countQty;
            console.log("子集计数", [..._countQty]);
        },

        // 合并计数
        beMergeQty() {
            let _countQty = this.countQty;
            // 生成合并规则
            let _arr = [];
            for (let i = 0; i < _countQty.length - 1; i++) {
                let _he = 0;
                for (let j = i + 1; j < _countQty.length; j++) {
                    if (_he == 0) {
                        _he = _countQty[j];
                    } else {
                        _he = _countQty[j] * _he;
                    }
                }
                _arr.push(_he);
            }
            this.mergeQty = _arr;
            console.log("合并计数", [...this.mergeQty]);
        },

        // 生成表头
        beTableHead() {
            // 表头数据
            let _head = [];

            // 已选规格
            let _tree = this.skuValue;
            // key列表
            let _keyList = [];
            // 生成表头
            _tree.forEach((item, index) => {
                // 如果里面没有数据则不计算
                if (item.specsValueLst.length <= 0) {
                    return;
                }
                _keyList.push("key" + item.specsId);
                _head.push({
                    title: item.specsName,
                    key: "key" + item.specsId,
                    type: "text",
                });
            });
            this.keyList = _keyList;
            // _head.push({
            //     type: "string",
            //     title: "商家编码",
            //     key: "productCode",
            // });
            // _head.push({
            //     type: "float",
            //     title: "销售价",
            //     key: "salePrice"
            // });
            // _head.push({
            //     type: "float",
            //     title: "市场价",
            //     key: "costPrice"
            // });
            // _head.push({
            //     type: "float",
            //     title: "成本价",
            //     key: "originalPrice",
            // });
            // _head.push({
            //     type: "int",
            //     title: "当前库存",
            //     key: "stock"
            // });
            // _head.push({
            //     type: "int",
            //     title: "添加/减少",
            //     key: "changeStockNum"
            // });
            // _head.push({
            //     type: "float",
            //     title: "重量（Kg）",
            //     key: "volume"
            // });
            // _head.push({
            //     type: "float",
            //     title: "体积（m³）",
            //     key: "weight"
            // });
            // 表头内容
            this.specsHeadData = _head;
            console.log("表头内容", [..._head]);
        },

        // 生成表体
        beTableMain() {
            // 表体数据
            let _main = [];
            // 已选规格
            let _tree = this.skuValue;

            // 解析已选规格
            _tree.forEach((item, index) => {
                let _m = [];
                let _n = 0;
                // 如果里面没有数据则不计算
                if (item.specsValueLst.length <= 0) {
                    return;
                }

                if (_main.length > 0) {
                    _main.forEach((iiitem, iiindex) => {
                        item.specsValueLst.forEach((iitem, iindex) => {
                            _m[_n] = JSON.parse(JSON.stringify(iiitem));
                            _m[_n]["key" + item.specsId] = iitem.specsValue;
                            _m[_n]["id" + item.specsId] = iitem.specsValueId;
                            _n += 1;
                        });
                    });
                } else {
                    // 循环规格列表内的 规格值 生成行内容
                    item.specsValueLst.forEach((iitem, iindex) => {
                        _m[iindex] = {};
                        _m[iindex]["key" + item.specsId] = iitem.specsValue;
                        _m[iindex]["id" + item.specsId] = iitem.specsValueId;
                        // 商家编码
                        _m[iindex].productCode = "";
                        // 封面图
                        _m[iindex].albumUrl = "";
                        // 销售价
                        _m[iindex].salePrice = "";
                        // 市场价
                        _m[iindex].costPrice = "";
                        // 成本价
                        _m[iindex].originalPrice = "";
                        // 当前库存   (编辑的只读)
                        _m[iindex].stock = 0;
                        // 添加/减少  (编辑的时候出现)
                        _m[iindex].changeStockNum = 0;
                        // 体积（m³）
                        _m[iindex].volume = "";
                        // 重量（Kg）
                        _m[iindex].weight = "";
                        // _m[iindex].keyId = item.specsId;
                    });
                }
                // console.error(2,_m);
                // 如果 行没有数据 就不记录
                if (_m.length > 0) {
                    _main = _m;
                }
            });

            // 插入 修改数据
            //
            if (this.editType == "update") {
                let _skuListHistory = [...this.skuListHistory];

                _main.forEach((item, index) => {
                    
                    _skuListHistory.forEach((iitem, iindex) => {
                        
                        // console.error("_skuListHistory", iitem.spData)
                        // ÷匹配数据
                        let _a1 = this.keyList.map((iiitem, iiindex) => {
                            // console.log("iiitem",JSON.parse(iitem.spData),iiitem)
                            return JSON.parse(iitem.spData)[iiitem];
                        });
                        let _a2 = this.keyList.map((iiitem) => {
                            return item[iiitem];
                        });

                        if (JSON.stringify(_a1) == JSON.stringify(_a2)) {
                            let _k = {
                                id: "",
                                // 商品编码
                                productCode: "",
                                // 封面图
                                albumUrl: "",
                                // 销售价
                                salePrice: "",
                                // 市场价
                                costPrice: "",
                                // 成本价
                                originalPrice: "",
                                // 当前库存   (编辑时只读)
                                stock: 0,
                                // 体积（m³）
                                volume: "",
                                // 重量（Kg）
                                weight: "",
                            };
                            // console.error("===",iitem.spData)
                            for (let i in _k) {
                                // console.log("ffwafa",index, i, item[i], iitem[i])
                                item[i] = iitem[i];
                            }
                        }
                    });
                    // console.error("---", JSON.stringify(item))
                });
            }

            // 表体内容
            this.specsTableData = _main;

            console.log("表体内容", [..._main], this.keyList);
        },

        // 计算数据
        countData() {
            // this.specsTableData = [];

            this.beCountQty();
            this.beMergeQty();
            this.beTableHead();
            this.beTableMain();
            this.returnData();
        },
        returnData() {
            this.$emit("change", {
                data: this.getData(),
                load: this.initLoad,
            });
        },
    },
    mounted() {},
    beforeCreate() {},
    watch: {
        form: {
            handler(newName, oldName) {
                this.returnData();
            },
            immediate: true,
            deep: true,
        },
        // 计价方式改变时重新校验
        calculateType: {
            handler(newName, oldName) {
                this.validate();
            },
        },
    },
};
</script>